<template>
    <div class="getters">
        <h2>doublecounter:{{ $store.getters.doublecounter }}</h2>
        <h2>totalmoeny:{{ $store.getters.totalmoeny }}</h2>
        <h2>message:{{ $store.getters.message }}</h2>
        <h2>getFriendById:{{ $store.getters.getFriendById(2) }}</h2>
        <hr>
        <h1>getters的映射:</h1>
        <h2>doublecounter:{{ doublecounter }}</h2>
        <h2>totalmoeny:{{ totalmoeny }}</h2>
        <h2>message:{{ message }}</h2>
        <button @click="clickname">改变姓名</button>
        <h2>getFriendById:{{ getFriendByIds(2) }}</h2>
    </div>
</template>
<script>
// 一、在options aip中
import { mapGetters } from 'vuex'
export default {
    computed: {
        // 数组写法
        ...mapGetters(["doublecounter", "totalmoeny"]),
        // 对象写法
        ...mapGetters({
            getFriendByIds:"getFriendById"
        })
    }
}
</script>
<script setup>
// 二、在composition aip中
import { computed } from "vue";
import { toRefs } from "vue";
import { useStore } from "vuex"
const store = useStore()
// 1.使用mapGetters 比较麻烦
const { message: messageFn } = mapGetters(["message"])
const message=computed(messageFn.bind({$store:store}))
// 2.实际上是一个函数形式 直接解构 torefs包裹使其为响应式
// const { message } = toRefs(store.getters)
// 3.针对某一个getters属性使用computed
// const message = computed(() => store.getters.message)

function clickname() {
    store.state.name = "哈哈"
}
</script>
<style scoped lang="less"></style>